<template>
  <div id="goods02">
    <!-- 2.搜索商品 -->
    <div class="showDiv02">
      <img src="@/assets/li/top01.png" alt class="talentBanner" />

      <div class="showGoods">
        <div class="topBox">
          <div>
            <div data-v-378b4e67 class="notice-box"></div>
            对标达人匹配商品
          </div>
          <span class="history" @click="history"
            >查看历史匹配记录<img src="@/assets/li/more.png" />
          </span>
        </div>
        <!-- 搜索商品 -->
        <section>
          <div class="searchBox">
            <input
              type="text"
              v-model="goodsWord"
              @focus="
                isText = false;
                isNull = false;
              "
              @keyup.enter="next()"
              placeholder="请输入您的抖音昵称或抖音号"
            />
            <div @click="next()">
              <img src="@/assets/meng/search01.png" />
            </div>
          </div>
          <p class="errText" v-if="isText">
            *抖音名称或抖音号最多为100个字符,请重新输入
          </p>
          <p class="errText" v-if="isNull">*请输入您的抖音昵称或抖音号</p>
        </section>
        <!-- <p class="scheme">无目标达人，跳过这一步</p>
        <button class="scheme_go">直接找商品</button> -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      goodsWord: "",
      isNull: false,
      isText: false,
    };
  },
  watch: {
    goodsWord: function (value) {
      window.localStorage.setItem("goodsWord", value);
    },
  },
  created() {
    document.title = "智能找商品&智能分析服务平台-掌上精选";
  },
  methods: {
    next() {
      if (this.goodsWord == "") {
        this.isNull = true;
      } else if (this.goodsWord.length > 50) {
        this.isText = true;
        this.goodsWord = " ";
      } else {
        this.isNull = false;
        this.isText = false;
        this.$router.push("/inAnalysis/expertList");
      }
    },

    history() {
      let router = this.$router.resolve({
        path: `/inAnalysis/historyGoods`,
      });
      window.open(router.href, "_blank");
    },
  },
};
</script>
<style lang="less" scoped>
#goods02 {
  background-color: #f5f5f5;
  padding-top: 14px;
  .showDiv02 {
    overflow: hidden;
    width: 1200px;
    margin: 0 auto;
    .talentBanner {
      width: 1201px;
      height: 54px;
      border-radius: 4px;
      margin-bottom: 13px;
    }
    .goodsIcon {
      width: 455px;
      height: 64px;
      display: block;
      margin: auto;
    }
    .showGoods {
      width: 100%;
      min-height: 774px;
      background-color: #ffffff;
      border-radius: 4px;
      padding: 30px 20px;
      box-sizing: border-box;
      .topBox {
        display: flex;
        justify-content: space-between;
        align-items: center;

        span {
          font-size: 14px;
          color: #fd7f2c;
          cursor: pointer;
          font-weight: normal;
        }
      }
      .notice-box {
        display: inline-block;
        width: 4px;
        height: 16px;
        border-radius: 100px;
        margin-right: 10px;
        background-color: #fd7f2c;
        margin-top: 1px;
      }
      div {
        display: flex;
        align-items: center;
        font-size: 16px;
        color: #222;
        font-weight: 600;
      }
    }
  }

  .searchBox {
    width: 513px;
    height: 51px;
    border-radius: 4px;
    border: solid 1px #e6e6e6;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    margin-top: 230px;

    input {
      width: 436px;
      height: 51px;
      line-height: 51px;
      border: none;
      padding-left: 21px;
      padding-right: 21px;
      color: #222;
      font-size: 16px;
    }
    input::-webkit-input-placeholder {
      color: #b5b5b5 !important;
      font-size: 16px;
    }
    div {
      width: 77px;
      height: 51px;
      background-color: #fd7f2c;
      border-radius: 4px;
      position: relative;
      cursor: pointer;
      img {
        width: 21px;
        height: 20px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }
  section {
    position: relative;
  }
  .errText {
    position: absolute;
    top: 63px;
    left: 322px;
    width: 513px;
    margin: 0 auto;
    text-align: left;
    font-size: 14px;
    color: #ea1b0b;
  }
  .history {
    > img {
      width: 7px;
      height: 11px;
      margin-left: 5px;
      margin-top: -3px;
    }
  }
  .scheme {
    font-size: 14px;
    font-weight: normal;
    line-height: 30px;
    color: #888888;
    margin-top: 144px;
    text-align: center;
  }
  .scheme_go {
    width: 115px;
    height: 40px;
    border-radius: 4px;
    border: solid 1px #fd7f2c;
    font-size: 14px;
    font-weight: normal;
    color: #fd7f2c;
    cursor: pointer;
    display: block;
    margin: 20px auto 0px;
  }
  .scheme_go:hover {
    border: 1px solid #ff924b;
    color: #ff924b;
  }
}
</style>
